DAY30 - [React] useMemo 與後續

13th鐵人賽

joannachen

2021-09-30 23:55:08

1213 瀏覽

分享至

今日文章目錄

前言

useMemo()

實作紀錄

參考資料

後續

今天要練習 useMemo()，不過爬了很多文，覺得還無法好好消化，這篇主要紀錄一些我找到的資料筆記，還有練習的過程。開始吧！

前言

昨天我們在切換頁面的時候，透過Provider value props把{state, setState}傳下去，讓子層可以改值。

// Provider 傳值與方法：
function App() {
  const [themsState, setThemeState] = useState(theme.light);

  return (
    <ThemeContext.Provider value={{ themsState, setThemeState }}>
    ...
    </ThemeContext.Provider>
  );
}

export default App;

function CategoryList(props) {
   const { themsState, setThemeState } = useContext(ThemeContext);
   return (...)
}

console.log()看一下，會發現：Provider傳什麼，useContext()就會回傳什麼(就是最新值)。
Provider傳什麼，useContext()就會回傳什麼(就是最新值)

官方文件有提到以下情況：
Caveats

我想確定目前寫法：<Context.Provider value ={{state, setState}}></Context.Provider>會不會造成上述的問題。搜了一輪資料，決定用useMemo inside Context API - React的方法來測試看看。

為了做個測試，我分別在父層ToDoPage，子層CategoryList TodoList component內加入 console.log()，來確認一下使用useMemo()與沒有使用useMemo()的差異。

測試目標：當我在 `ToDoPage`點擊按鈕更新值時，Provider props value 是否會重新建立，導致子層 `CategoryList` `ToDoList` re-render?

對比項目：
- CategoryList 父層加入 ThemeContext.Provider value props :
  使用 useMemo()，當 dependency改變時，才更新回傳值。
- ToDoList 父層加入 ThemeContext.Provider value props :
  直接傳入{ themsState, setThemeState }

測試Ａ

export default function ToDoPage() {
  const [forceRender, setForceRender] = useState(false);
  const [themsState, setThemeState] = useState(theme.light);
  const themeContextProvider = useMemo(() => (
      { themsState, setThemeState }), [themsState, setThemeState]
  );

  return (
    <>
      {console.log('hey! I am in ToDoPage.')}
      <MainLayout
        menu={(
          <ThemeContext.Provider value={themeContextProvider}>
            <CategoryList />
          </ThemeContext.Provider>
        )}
        content={(
          <ThemeContext.Provider value={{ themsState, setThemeState }}>
            <ToDoList />
          </ThemeContext.Provider>
        )}
      />
      <Button onClick={() => setForceRender(!forceRender)}>Rerender Parent</Button>
    </>
  );
}

顯示效果：

ToDoList 或 CategoryList 切換 theme，更新ThemeContext.Provider值。
ToDoPage 點擊按鈕: 觸發 ToDoPage CategoryList ToDoList re-render。

疑？看不出來 useMemo() 的效果

測試B :

測試B

CategoryList、ToDoList 加入 memo()
試試看！

export default memo(CategoryList);

export default memo(ToDoList);

顯示效果：

ToDoList 或 CategoryList 切換 theme，更新ThemeContext.Provider值。
ToDoPage 點擊按鈕: 觸發 ToDoPage ToDoList re-render。CategoryList 沒有。

呼～終於有點收穫...

目前看起來的狀況：
測試A：父層狀態改變，子層re-render。
測試B：父層狀態改變，透過memo()比對CategoryList ToDoList，根本沒有props，所以不受父層狀態改變影響，唯一帶來改變的是ToDoList的ThemeContext.Provider value={{ themsState, setThemeState }}，每次都重新建立。

不過我應該把 console.log() 放一個在 useMemo()比較準才對..

useMemo 小百科：

useMemo(() => computeExpensiveValue(a, b), [a, b]);

為了解決當元件本身改變狀態 re-render，避免元件內無關的邏輯重複渲染的效能問題。

用途：當dependency改變，才會執行computeExpensiveValue(a, b)重新計算，回傳一個 memoized 的值。

參數：

computeExpensiveValue(a, b) : 一function，回傳值會讓React記著，在dependency沒改變的情況下，會一直沿用該回傳值。

[a, b]: dependency。

memo 小百科：

memo(MyComponent, areEqual) :
React 渲染機制，只要父層state改變，不論子層接收的props值是否有改變，子層一律強迫 re-render。
memo()是為了解決子層接收的props導致重複渲染的效能問題。

用途：比對更新前後props差異，沒有改變，會跳過這次 re-render。

參數：
> MyComponent : 作用元件
> areEqual *(optional)* : 客制function。memo()比對方式 shallowly compare complex objects in the props object，如果要做更深層的比對，可以自己寫。

If your function component wrapped in React.memo has a useState, useReducer or useContext Hook in its implementation, it will still rerender when state or context change. - 節錄React 官網。